<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn :number1='num1' :number2='num2'
			 @num1change='num1change' @num2change='num2change'></cpn>
		</div>
		<template id="cpn">
			<div id="">
				<h2>props:{{number1}}</h2>
				<h2>data:{{dnumber1}}</h2>
				<!-- <input type="text" name="" id="" value="" v-model="dnumber1"/> -->
				<input type="text" name="" id="" v-model="dnumber1"/>
				<h2>props:{{number2}}</h2>
				<h2>data:{{dnumber2}}</h2>
				<!-- <input type="text" name="" id="" value="" v-model="dnumber2"/> -->
				<input type="text" name="" id="" v-model="dnumber2"/>
			</div>
		</template>
		<script src="../js/vue.js"></script>
		<script>
			Vue.s
			const app=new Vue({
				el:'#app',
				data:{
					num1:1,
					num2:0
				},
				components:{
					cpn:{
						template:'#cpn',
						props:{
							number1:Number,
							number2:Number
						},
						data(){
							return{
								dnumber1:this.number1,
								dnumber2:this.number2,
								event:{
									
								}
							}
						},
						watch:{
							dnumber1(newValue){
								this.dnumber2=newValue*100;
								this.$emit('num1change',newValue);
							},
							dnumber2(newValue){
								this.dnumber1=newValue/100;
								this.$emit('num2change',newValue);
							}
						}
						
					}
				},
				methods:{
					num1change(event){
						this.num1=parseFloat(event);
					},
					num2change(event){
						this.num2=parseFloat(event);
					}
				}
			})
		</script>
	</body>
</html>
